<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="900px"
    append-to-body  
    @close="close"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="160px"
        label-position="right"
        :disabled="isDetail"
      >
        <el-col :span="24">
          <el-form-item label="考试标题" prop="examinationtitle">
            <el-input
              v-model="dataForm.examinationtitle"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="试卷类型" prop="papertype">
            <el-select
              v-model="dataForm.papertype"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              :multiple="false"
            >
              <el-option
                v-for="(item, index) in getDict('shijuanleixing')"
                :key="index"
                :label="item.dataName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="考试方式：" prop="questionmethod">
            <div>
              <el-select
                v-model="dataForm.questionmethod"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
                @change="questionmethodChange"
              >
                <el-option
                  v-for="(item, index) in getDict('questionmethod')"
                  :key="index"
                  :label="item.dataName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="试卷名称" prop="paperid">
            <el-input
              placeholder="请选择试卷"
              v-model="paperName"
              readonly
              @click.native="shijuanClick"
            >
              <template slot="append">
                <el-button type="primary" @click="shijuanClick"
                  >选择试卷</el-button
                ></template
              >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="试卷总分">
            <el-input
              placeholder="试卷总分由选择试卷后自动生成"
              v-model="totalScore"
              readonly
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="及格分" prop="passinggrade">
            <el-input placeholder="及格分" v-model="dataForm.passinggrade">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="考试时长(分)：" prop="testtime">
            <div>
              <el-input
                placeholder="请输入考试时长"
                v-model="dataForm.testtime"
                class="paperinput"
                @input="testtimeEvent(dataForm.testtime)"
              >
              </el-input>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="考试开始时间"
            prop="starttime"
            v-show="dataForm.questionmethod && dataForm.testtime"
          >
            <el-date-picker
              v-model="dataForm.starttime"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="timestamp"
              :picker-options="
                dataForm.questionmethod == 'b876a8387d6e4b588573bf74a557ed1b'
                  ? ''
                  : pickerOptions0
              "
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="考试结束时间"
            prop="endtime"
            v-show="dataForm.questionmethod && dataForm.testtime"
            readonly
          >
            <el-date-picker
              v-model="dataForm.endtime"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="timestamp"
              :readonly="
                dataForm.questionmethod == 'b876a8387d6e4b588573bf74a557ed1b'
              "
              :picker-options="
                dataForm.questionmethod == 'b876a8387d6e4b588573bf74a557ed1b'
                  ? ''
                  : pickerOptions1
              "
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="试卷状态" prop="paperstatus" v-show="false">
            <el-select
              v-model="dataForm.paperstatus"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              :multiple="false"
            >
              <el-option
                v-for="(item, index) in getDict('banjikaoshishijuanzhuangtai')"
                :key="index"
                :label="item.dataName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
          <el-form-item label="学员答题设备设置" prop="allowedequipment">
            <el-radio-group v-model="dataForm.allowedequipment">
              <el-radio label="0">可使用电脑或手机</el-radio>
              <el-radio label="1">仅电脑</el-radio>
              <el-radio label="2">仅手机</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->

        <el-col :span="12">
          <el-form-item label="自动阅卷" prop="automaticmarking">
            <el-switch
              v-model="dataForm.automaticmarking"
              active-text="考试结束后立即出现分数"
              active-value="true"
            >
            </el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="人脸认证进入考试" prop="facerecognition">
            <el-switch
              v-model="dataForm.facerecognition"
              active-text="开启后，需人脸认证通过才可以进入考试"
              active-value="true"
            >
            </el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="答题时摄像头拍照监考" prop="cameramonitoring">
            <el-switch v-model="dataForm.cameramonitoring" active-value="true">
            </el-switch
            ><span
              style="margin-left:10px"
              v-show="dataForm.cameramonitoring === 'true'"
              >学员开始答题后，每
              <el-input-number
                v-model="dataForm.cameramonitoringtime"
                placeholder="数字文本"
                :step="1"
                :min="1"
              >
              </el-input-number>
              分钟抓拍一张学员答题照片</span
            >
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
          <el-form-item label="考试过程定时人脸识别" prop="zpdb">
            <el-switch v-model="dataForm.zpdb" active-value="true"> </el-switch
            ><span style="margin-left:10px" v-show="dataForm.zpdb === 'true'"
              >对抓拍图片进行人脸识别，如果连续识别失败次数超过
              <el-input-number
                v-model="dataForm.facefail"
                placeholder="数字文本"
                :step="1"
                :min="1"
              >
              </el-input-number>
              次就强制交卷</span
            >
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="切屏后强制交卷" prop="anticuttingscreen">
            <el-switch v-model="dataForm.anticuttingscreen" active-value="true">
            </el-switch
            ><span
              style="margin-left:10px"
              v-show="dataForm.anticuttingscreen === 'true'"
              >学员切换画面超过
              <el-input-number
                v-model="dataForm.cuttingscreennum"
                placeholder="数字文本"
                :step="1"
                :min="1"
              >
              </el-input-number>
              次后就强制交卷
              <!-- ，切换到其他页面
              <el-input-number
                v-model="dataForm.screesecond"
                placeholder="数字文本"
                :step="1"
                :min="1"
              >
              </el-input-number
              >秒后即判定为切屏 -->
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="考试描述" prop="examinationdesc">
            <el-input
              v-model="dataForm.examinationdesc"
              placeholder="请输入"
              :style="{ width: '100%' }"
              true
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
        >确 定</el-button
      >
    </span>
    <ShijuanForm
      v-if="ShijuanFormVisible"
      ref="ShijuanForm"
      @refresh="refresh"
      @currentChange="currentChange"
    />
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import ShijuanForm from "./shijuanForm";
export default {
  components: {
    ShijuanForm
  },
  props: [],
  name: "abc",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请选择考试开始时间"));
      } else if (
        value >
        this.dataForm.endtime - this.dataForm.testtime * 60 * 1000
      ) {
        callback(new Error("开始时间不可大于结束时间+考试时长"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请选择考试结束时间"));
      } else if (
        value <
        this.dataForm.starttime + this.dataForm.testtime * 60 * 1000
      ) {
        callback(new Error("结束时间不可低于开始时间+考试时长"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入及格分"));
      } else if (value * 1 > this.totalScore * 1) {
        callback(new Error("及格分不能大于试卷总分"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      visible: false,
      isDetail: false,
      ShijuanFormVisible: false,
      activeName: "",
      dataForm: {
        id: undefined,
        creatoruserid: "",
        lastmodifyuserid: "",
        creatortime: "",
        lastmodifytime: "",
        clazzid: "",
        paperid: "",
        papertype: "",
        examinationtime: undefined,
        paperstatus: "f405dc5c591a4a7382d3ecf74a3d0b4a",
        examinationtitle: undefined,
        examinationdesc: undefined,
        starttime: undefined,
        endtime: undefined,
        testtime: undefined,
        questionmethod: undefined,
        facerecognition: false,
        passinggrade: undefined,
        anticuttingscreen: false,
        cuttingscreennum: 3,
        cameramonitoring: false,
        cameramonitoringtime: 1,
        automaticmarking: true,
        zpdb: false,
        facefail: 5,
        screesecond: 5,
        allowedequipment: undefined,
        organizeId:"",
      },
      rules: {
        questionmethod: [
          { required: true, message: "请选择考试方式", trigger: "change" }
        ],
        paperid: [
          { required: true, message: "请选择考试试卷", trigger: "change" }
        ],
        papertype: [
          { required: true, message: "请选择试卷类型", trigger: "change" }
        ],
        starttime: [
          { validator: validatePass, trigger: "blur" },
          {
            required: true,
            message: "请选择考试开始时间",
            trigger: "change"
          }
        ],
        endtime: [
          { validator: validatePass2, trigger: "blur" },
          {
            required: true,
            message: "请选择考试结束时间",
            trigger: "change"
          }
        ],
        examinationtitle: [
          { required: true, message: "请输入考试标题", trigger: "blur" }
        ],
        testtime: [
          { required: true, message: "请输入考试时长", trigger: "blur" }
        ],
        passinggrade: [
          { validator: validatePass3, trigger: "blur" },
          { required: true, message: "请输入及格分", trigger: "blur" }
        ]
      },
      papertypeOptions: [],
      paperstatusOptions: [],
      paperName: "",
      pickerOptions0: {
        disabledDate: time => {
          if (this.dataForm.endtime) {
            return time.getTime() > this.dataForm.endtime;
          }
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          if (this.dataForm.starttime) {
            return time.getTime() < this.dataForm.starttime - 8.64e7;
          }
        }
      },
      totalScore: ""
    };
  },
  computed: {},
  watch: {
    "dataForm.starttime": {
      handler(value) {
        if (
          this.dataForm.questionmethod === "b876a8387d6e4b588573bf74a557ed1b"
        ) {
          this.dataForm.endtime = value + this.dataForm.testtime * 60 * 1000;
        }
      }
    }
  },
  mounted() {},
  methods: {
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/clazzpaper/Xy_ks_clazz_paper/" + this.dataForm.id,
            method: "get"
          }).then(res => {
            this.dataForm = res.data;
            console.log(this.dataForm, 888);
            if (this.dataForm.paperid) {
              request({
                url:
                  "/api/testPaperManage/Xy_ks_examination_paper/" +
                  this.dataForm.paperid,
                method: "get"
              }).then(res => {
                // console.log(res.data, 22222);
                this.paperName = res.data.testpapername;
                this.totalScore = res.data.totalScore;
              });
            }
            this.loading = false;
          });
        }
      });
    },
    shijuanClick() {
      this.ShijuanFormVisible = true;
      this.$nextTick(() => {
        this.$refs.ShijuanForm.visible = true;
      });
    },
    refresh() {
      this.ShijuanFormVisible = false;
    },
    close() {
      this.$emit("refresh", true);
    },
    currentChange(val) {
      this.dataForm.paperid = val.id;
      this.totalScore = val.totalScore;
      this.paperName = val.testpapername;
      console.log(val.totalScore, "total");
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          this.dataForm.organizeId= this.$store.getters.organizeId;
          if (!this.dataForm.id) {
            request({
              url: `/api/clazzpaper/Xy_ks_clazz_paper`,
              method: "post",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000
              });
              this.visible = false;
              this.$emit("refresh", true);
            });
          } else {
            request({
              url: "/api/clazzpaper/Xy_ks_clazz_paper/" + this.dataForm.id,
              method: "PUT",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000
              });
              this.visible = false;
              this.$emit("refresh", true);
            });
          }
        }
      });
    },
    // 选择考试方式
    questionmethodChange() {
      this.dataForm.endtime =
        this.dataForm.starttime + this.dataForm.testtime * 60 * 1000;
    },
    // 输入考试时长
    testtimeEvent(duration) {
      this.dataForm.endtime = this.dataForm.starttime + duration * 60 * 1000;
    }
  }
};
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding-left: 20px !important;
}
::v-deep .el-input {
  height: 32px;
}
.paperinput {
  width: 240px;
}
</style>
